<script setup lang="ts">
import { ref, h } from "vue";
import {
  getSettlement,
  getSettlementState,
  DownloadBySettlementAgent,
  getListDtl,
  getListByAgent
} from "@/api/statement";
import { downloadFile } from "@/utils";
import { ElTooltip } from "element-plus";
defineOptions({
  name: "channel"
});

const value = ref("");
const value1 = ref("");
const currentPage1 = ref(1);

const size = ref("default");
const background = ref(false);
const disabled = ref(false);

const pageTotal = ref(0);

const dialogTableVisible = ref(false);
const gridData = ref([]);
let tableData = ref([]);

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  getListData(val);
};

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  getListData(val);
};

const options = [
  {
    code: 0,
    desc: "未对账"
  },
  {
    code: 1,
    desc: "账单问题确认中"
  },
  {
    code: 2,
    desc: "已对账"
  },
  {
    code: 3,
    desc: "已撤销"
  },
  {
    code: 4,
    desc: "已作废"
  }
];

getListData();
getSettlementState();
function getListData(pageNum = 1, pageSize = 10) {
  getSettlement({
    pageNum,
    pageSize,
    total: 0
  }).then((res: any) => {
    const totalData = res.data;
    tableData.value = totalData.rows;
    pageTotal.value = res.total;
    console.log(tableData);
  });
}
const downloadBill = id => {
  console.log(id);
  DownloadBySettlementAgent({ id }, { responseType: "blob" }).then(
    (res: any) => {
      const { data, headers } = res;
      downloadFile(data, headers);
    }
  );
};
let getInfoID: string | number = "";
const getInfo = (
  id: string | number,
  pageNum: number = 1,
  pageSize: number = 10
) => {
  getInfoID = id;
  getListDtl({ id, pageNum, pageSize, total: 0 }).then((res: any) => {
    const { data, rows } = res;
    if (rows.length) {
      const one = rows[0];
      dialogTitle.value = `${one.startDate}~${one.endDate}对账单`;
    }
    gridData.value = rows;
    dialogTotal.value = data.total;
    console.log(res);
  });
};
const dialogTitle = ref("");
const dialogTotal = ref(0);
const dialogCurrent = ref(1);
const showOneTable = ref(true);
const dialogHandleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  getInfo(val);
};

const dialogHandleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  getInfo(val);
};

const closeDialog = () => {
  showOneTable.value = true;
};
const handleDialogDetails = data => {
  // deptId=476&merchantsInfoId=454&taxSourcesId=39&createTimeStart=2023-10-16&createTimeEnd=2023-10-22&pageNum=1&pageSize=10&total=1
  getListByAgent({
    deptId: data.deptId,
    merchantsInfoId: data.merchantsInfoId,
    taxSourcesId: data.taxSourcesId,
    createTimeStart: "2022-03-01",
    createTimeEnd: "2022-04-01"
    // createTimeStart: data.startDate,
    // createTimeEnd:  data.endDate
  }).then((res: any) => {
    console.log(res);
  });

  console.log(data);
};
const renderstate = ({ column }) => {
  // return h(ElTooltip, {content: 'dfddfdfd',placement: 'top-start', effect: 'light'}, [column.label])
  return h("span", column.label);
};
</script>
<template>
  <div class="statement">
    <div class="search">
      <div class="select">
        <el-select size="large" v-model="value" placeholder="请选择对账状态">
          <el-option
            v-for="item in options"
            :key="item.code"
            :label="item.desc"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </div>
      <div class="block zd">
        <el-date-picker
          v-model="value1"
          size="large"
          type="daterange"
          range-separator="-"
          start-placeholder="账单生成开始"
          end-placeholder="账单生成结束"
        >
        </el-date-picker>
      </div>
      <div class="block dl">
        <el-date-picker
          v-model="value1"
          size="large"
          type="daterange"
          range-separator="-"
          start-placeholder="代理确认开始"
          end-placeholder="代理确认结束"
        >
        </el-date-picker>
      </div>
      <div class="search-btn">
        <el-button size="large">查询</el-button>
        <el-button type="primary" size="large">重置</el-button>
      </div>
    </div>
    <div class="c-page__bg">
      <el-table :data="tableData">
        <el-table-column width="220" label="账单周期">
          <template #default="{ row }">
            {{ row.startDate }} ~ {{ row.endDate }}
          </template>
        </el-table-column>
        <el-table-column
          prop="settlementTypeDisplay"
          label="账单类型"
          :render-header="renderstate"
        ></el-table-column>
        <el-table-column prop="settlementAmount" label="对账金额(元)">
        </el-table-column>
        <el-table-column width="180" prop="createTime" label="生成时间">
        </el-table-column>
        <el-table-column prop="verifyDeadline" label="确认截止时间">
        </el-table-column>
        <el-table-column prop="verifyTime" label="对账时间"> </el-table-column>
        <el-table-column prop="settlementStateDisplay" label="状态">
          <template #default="{ row }">
            {{ row.startDate.settlementStateDisplay }}
            <div class="c-flex-row" style="align-items: center">
              <span
                v-if="row.settlementStateDisplay === '已对账'"
                class="c-dot-success"
              ></span>
              <span v-else class="c-dot-success"></span>
              {{ row.settlementStateDisplay }}
            </div>
          </template>
        </el-table-column>
        <el-table-column #default="{ row }" label="操作">
          <span class="c-text-primary" @click="downloadBill(row.id)"
            >下载账单</span
          >
          <span
            class="c-text-primary"
            @click="getInfo(row.id), (dialogTableVisible = true)"
            >查看</span
          >
        </el-table-column>
      </el-table>
      <div class="pagination-block">
        <el-pagination
          v-model:current-page="currentPage1"
          :page-size="10"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, prev, pager, next"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- <el-dialog v-model="dialogTableVisible" :title="dialogTitle" width="1200" center> -->
    <el-dialog v-model="dialogTableVisible" width="1200" @close="closeDialog">
      <div class="system-icon-content">
        <template v-if="showOneTable">
          <div class="flex-row">{{ dialogTitle }}</div>
          <el-table :data="gridData">
            <el-table-column label="序号" type="index" />
            <el-table-column
              property="merchantsInfoIdDisplay"
              :show-overflow-tooltip="true"
              label="商户名称"
            />
            <el-table-column property="deptIdDisplay" label="走款服务商" />
            <el-table-column property="totalAmount" label="总金额" />
            <el-table-column property="incomeRate" label="服务费率" />
            <el-table-column property="costRate" label="结算费率" />
            <el-table-column
              property="commissionDeductionProportion"
              label="推广点"
            />
            <el-table-column property="settlementAmount" label="结算金额" />
            <el-table-column #default="{ row }" label="操作">
              <span
                class="c-text-primary"
                @click="handleDialogDetails(row), (showOneTable = false)"
                >查看明细</span
              >
            </el-table-column>
          </el-table>
          <div class="pagination-block">
            <el-pagination
              v-model:current-page="dialogCurrent"
              :page-size="10"
              :size="size"
              :disabled="disabled"
              :background="background"
              layout="total, prev, pager, next"
              :total="dialogTotal"
              @size-change="dialogHandleSizeChange"
              @current-change="dialogHandleCurrentChange"
            />
          </div>
        </template>
        <template v-else>
          <div class="back">
            <div @click="showOneTable = true" class="back-text">
              <el-icon>
                <ArrowLeftBold />
              </el-icon>
              <span>返回</span>
            </div>
            <span class="title">{{ dialogTitle }}</span>
          </div>
          <el-table :data="[]">
            <el-table-column label="操作"></el-table-column>
          </el-table>
        </template>
      </div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.statement {
  height: 100%;
  overflow: hidden;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
}

.search {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .block {
    width: 30%;
    padding-left: 30px;
    padding-right: 30px;
  }

  .search-btn {
    padding-left: 15px;
  }

  .search-btn,
  .select {
    width: 20%;
  }
}

.c-page__bg {
  width: 100%;
  height: 100%;
  margin-top: 25px;
  padding-bottom: 24px;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.c-text-primary {
  font-size: 14px;
  color: #1c9fff;
  white-space: nowrap;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
}

.pagination-block {
  padding-top: 20px;
  padding-right: 10px;
  display: flex;
  justify-content: flex-end;
}

.c-dot-success,
.c-dot-info {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #43bf0a;
}

.c-dot-info {
  background-color: #bfbfbf;
}

.system-icon-content {
  min-height: 500px;
}

.flex-row {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: #262626;
}

.back {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #1c9fff;

  .back-text {
    display: flex;
    align-items: center;
    padding-right: 5px;
    font-size: 16px;
    cursor: pointer;
  }

  .title {
    color: #8c8c8c;
    font-size: 16px;
  }
}
</style>
